<template>
    <MrCustom bg-color="bg-gradual-blue " is-back>
        <template #backText>
            返回
        </template>
    </MrCustom>
    <view>
        <view v-if="schedule&&schedule.isAppointment===1"
              class="bg-gradual-red flex flex-sub justify-center padding text-xl text-bold">
            已预约
        </view>
        <view v-if="schedule" class="bg-white margin-xs padding">
            <view class="flex flex-sub solid-bottom">
                <MrAvatar :src="schedule.avatar"></MrAvatar>
                <view class="padding">
                    <view class="text-xxl text-bold text-black">{{ schedule.nurseName }}</view>
                    <view class="text-gray text-lg">{{ schedule.hospital }}</view>
                </view>
            </view>
            <view class="flex flex-sub flex-direction text-gray text-lg padding">
                <view>
                    <view class="text-bold text-black text-xl">
                        就诊人信息
                    </view>
                    <view class="flex padding-tb-xs padding-left">
                        <view style="width: 25vw">就诊人：</view>
                        <view class="text-black">{{ patientInfo.name }}</view>
                    </view>
                    <view class="flex padding-tb-xs padding-left">
                        <view style="width: 25vw">性别：</view>
                        <view class="text-black">{{ patientInfo.sex }}</view>
                    </view>
                    <view class="flex padding-tb-xs padding-left">
                        <view style="width: 25vw">居住地址：</view>
                        <view class="text-black">{{ patientInfo.address }}</view>
                    </view>
                </view>
                <view>
                    <view class="text-bold text-black text-xl margin-top">
                        预约信息
                    </view>
                    <view class="flex padding-tb-xs padding-left">
                        <view style="width: 25vw">预约时间：</view>
                        <view class="text-black">{{ getStartTimeString(schedule.start) }}-{{
                            getEndTimeString(schedule.end)
                            }}
                        </view>
                    </view>
                    <view class="flex padding-tb-xs padding-left">
                        <view style="width: 25vw">挂号费：</view>
                        <view class="text-black">{{ schedule.price }} 元</view>
                    </view>
                </view>
                <view v-if="schedule&&schedule.isAppointment===0">
                    <view class="text-bold   text-black text-xl margin-top">
                        确认信息
                    </view>
                    <uni-forms ref="formRef" :rules="rules" :modelValue="formData" labelWidth="0">
                        <uni-forms-item name="email">
                            <view class="cu-form-group solid-bottom">
                                <view class="title">邮箱</view>
                                <input v-model="formData.email" placeholder="请输入邮箱" name="input"/>
                                <view class="cu-capsule radius">
                                    <view class="cu-tag">
                                        <view class="cuIcon-mail"></view>
                                    </view>
                                </view>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item name="type">
                            <view class="cu-form-group solid-bottom">
                                <view class="title">预约类型</view>
                                <picker @change="typeChange" :value="typeIndex" :range="typeOption">
                                    <view class="picker">
                                        {{ typeIndex > -1 ? typeOption[typeIndex] : '请选择预约类型' }}
                                    </view>
                                </picker>
                            </view>
                        </uni-forms-item>
                        <uni-forms-item name="code">
                            <view class="cu-form-group solid-bottom">
                                <view class="title">验证码</view>
                                <input v-model="formData.code" placeholder="请输入验证码" name="input"/>
                                <button class='cu-btn bg-blue shadow' :disabled="!isSend" @click="getCode">
                                    {{ isSend ? '验证码' : second }}
                                </button>
                            </view>
                        </uni-forms-item>
                    </uni-forms>
                </view>
            </view>
        </view>
    </view>
    <view v-if="schedule&&schedule.isAppointment===0" class="cu-bar foot bg-white">
        <view class="flex flex-sub justify-end align-center">
            <view class="margin-right">
                <text class="text-lg">合计：</text>
                <text class="text-price text-red">{{ schedule.price }}</text>
            </view>
            <button class="cu-btn lg bg-green round" @click="handleSubmit">
                确认预约
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
import {ref,} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import api from "@/api";
import myMoment from "@/utils/common/myMoment";
import MrAvatar from "@/components/common/MrAvatar.vue";
import {getEndTimeString, getStartTimeString, isEmail} from '@/utils'
import MrCustom from "@/components/common/MrCustom.vue";

const formData = ref({
    email: '',
    email: '',
    type: 0,
    code: '',
})
const formRef = ref()
const isSend = ref(true)
const second = ref(0)
const rules = ref({
    email: {
        rules: [{
            required: true,
            errorMessage: '请输入邮箱',
        }]
    },
    type: {
        rules: [{
            required: true,
            errorMessage: '请输入预约类型',
        }]
    },
    code: {
        rules: [{
            required: true,
            errorMessage: '请输入验证码',
        }]
    },
})
const typeIndex = ref(-1)
const typeOption = ref(['维护', '置管', '拔管'])
const typeChange = (e: any) => {
    typeIndex.value = e.detail.value
    formData.value.type = e.detail.value * 1.0 + 1
}

const schedule = ref()
const patientInfo = ref()

onLoad((option) => {
    schedule.value = JSON.parse(decodeURIComponent(option.params)).schedule
    patientInfo.value = JSON.parse(decodeURIComponent(option.params)).patientInfo
})
const getCode = () => {
    if (!formData.value.email) {
        uni.showToast({
            title: '邮箱不能为空',
            icon: 'error'
        })
        return
    }
    if (!isEmail(formData.value.email)) {
        uni.showToast({
            title: '请输入正确邮箱',
            icon: 'error'
        })
        return
    }
    isSend.value = false
    second.value = 60
    setInterval(() => {
        second.value--
        if (second.value === 1) {
            isSend.value = true
        }
    }, 1000)
    api.mail.code({
        email: formData.value.email
    }).then(res => {
        if (res && res.data.code !== 0) {
            isSend.value = true
        }
    })
}

const handleSubmit = () => {
    formRef.value.validate((valid: any) => {
        if (!valid) {
            api.appointment.create({
                patientUsername: patientInfo.value.username,
                patientName: patientInfo.value.name,
                patientAvatar: patientInfo.value.avatar,
                nurseUsername: schedule.value.username,
                nurseName: schedule.value.nurseName,
                nurseAvatar: schedule.value.avatar,
                type: formData.value.type,
                appointmentTime: schedule.value.start + ',' + schedule.value.end,
                scheduleId: schedule.value.id,
                email: formData.value.email,
                code: formData.value.code
            }).then(res => {
                if (res && res.data.code === 0) {
                    let pages = getCurrentPages()
                    let prePage = pages[pages.length - 2] //上一个页面
                    uni.navigateBack({
                        success: () => {
                            prePage.$vm.onRefresh()
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'success',
                            })
                        }
                    })
                }
            })
        }
    })
}

</script>

<style scoped>
/deep/ .uni-forms-item {
    margin: 0;
}
</style>
